{% extends 'base.html' %}
{% from 'bootstrap/form.html' import render_form %}
{% block scripts %}
    {{ super() }}
    <script>
        $(document).ready(function () {
            let element = $("input[name='group_name']");
            let hint_element = $("<div id='hint'>" + "{{ _("Hint") }}" + ":</div>");
            element.after(hint_element);
            element.keyup(function (){
                let value = element.val();
                console.log("{{ url_for('ajax.get_group_hint') }}"+ "?q=" + value);
                $.get("{{ url_for('ajax.get_group_hint') }}" + "?q=" + value, function (data, status) {
                    $('#hint').html(" {{ _("Hint") }}: ");
                    let hint_list = data["hint"];
                    for(let i = 0; i < hint_list.length; i++){
                        $('#hint').html($('#hint').html() + '<br>' + hint_list[i]);
                    }
                })
            })
        })
    </script>
{% endblock scripts %}
{% block page_content %}
    <h1>{{ _("Which group do you want to join?") }}</h1>
    {{ render_form(form) }}
{% endblock page_content %}